<template>
  <div class="products-page">
    <!-- 复用导航栏组件 -->
    <HeaderNav />
    
    <!-- 页面标题区 -->
    <section class="page-banner">
      <div class="banner-content">
        <h1 class="page-title">{{ $t('products.pageTitle') }}</h1>
        <div class="page-breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item><router-link to="/">{{ $t('common.home') }}</router-link></el-breadcrumb-item>
            <el-breadcrumb-item>{{ $t('products.pageTitle') }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </section>
    
    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 模块1：主类目导航栏 -->
      <section class="main-category-nav" ref="mainCategoryNav">
        <div class="container">
          <div class="category-buttons">
            <button 
              v-for="(category, index) in mainCategories" 
              :key="index"
              class="category-btn"
              :class="{ active: currentMainCategory === category.id }"
              @click="filterByMainCategory(category.id)"
            >
              <i class="iconfont" :class="category.icon"></i>
              <span class="category-name">{{ category.name }}</span>
            </button>
          </div>
        </div>
      </section>
      
      <!-- 模块2：子类产品筛选区 -->
      <section class="subcategory-filter">
        <div class="container">
          <div class="filter-buttons">
            <button 
              class="filter-btn all-btn"
              :class="{ active: currentSubCategory === 'all' }"
              @click="filterBySubCategory('all')"
            >
              {{ $t('products.allProducts') }}
            </button>
            <button 
              v-for="(subcategory, index) in currentSubCategories" 
              :key="index"
              class="filter-btn"
              :class="{ active: currentSubCategory === subcategory.id }"
              @click="filterBySubCategory(subcategory.id)"
            >
              {{ subcategory.name }}
            </button>
          </div>
        </div>
      </section>
      
      <!-- 模块3：产品卡片展示区 -->
      <section class="products-grid">
        <div class="container">
          <div class="products-list">
            <div 
              class="product-card" 
              v-for="(product, index) in filteredProducts" 
              :key="index"
              data-aos="fade-up"
              :data-aos-delay="(index % 6) * 100"
              @click="goToProductDetail(product.id)"
            >
              <div class="product-image">
                <img :src="product.imageUrl" :alt="product.name">
                <div class="product-overlay">
                  <button class="view-detail-btn">
                    {{ $t('products.viewDetails') }}
                    <i class="iconfont icon-arrow-right"></i>
                  </button>
                </div>
              </div>
              <div class="product-info">
                <h3 class="product-name">{{ product.name }}</h3>
                <div class="product-desc">{{ product.shortDesc }}</div>
                <div class="product-tags">
                  <el-tag v-for="(tag, i) in product.tags.slice(0, 2)" :key="i" size="small">{{ tag }}</el-tag>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 空状态 -->
          <div class="empty-state" v-if="filteredProducts.length === 0">
            <div class="empty-icon">
              <i class="iconfont icon-empty"></i>
            </div>
            <div class="empty-text">{{ $t('products.noProducts') }}</div>
            <el-button type="default" @click="resetFilters">{{ $t('products.resetFilters') }}</el-button>
          </div>
        </div>
      </section>
    </main>
    
    <!-- 页脚 -->
    <Footer />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import $ from 'jquery'
import AOS from 'aos'
import HeaderNav from '@/components/layout/HeaderNav.vue'
import Footer from '@/components/layout/Footer.vue'

// 响应式状态
const currentMainCategory = ref('all')
const currentSubCategory = ref('all')
const mainCategoryNav = ref(null)

// 主类目数据
const mainCategories = [
  {
    id: 'crushing',
    name: '破碎机设备',
    icon: 'icon-crusher',
    subcategories: [
      { id: 'jaw-crusher', name: '颚式破碎机' },
      { id: 'cone-crusher', name: '圆锥破碎机' },
      { id: 'impact-crusher', name: '冲击式破碎机' },
      { id: 'hammer-crusher', name: '锤式破碎机' }
    ]
  },
  {
    id: 'grinding',
    name: '碾金机设备',
    icon: 'icon-grinder',
    subcategories: [
      { id: 'ball-mill', name: '球磨机' },
      { id: 'rod-mill', name: '棒磨机' },
      { id: 'raymond-mill', name: '雷蒙磨' },
      { id: 'vertical-mill', name: '立式磨' }
    ]
  },
  {
    id: 'screening',
    name: '筛分设备',
    icon: 'icon-screen',
    subcategories: [
      { id: 'vibrating-screen', name: '振动筛' },
      { id: 'circular-screen', name: '圆振动筛' },
      { id: 'linear-screen', name: '直线筛' },
      { id: 'high-frequency-screen', name: '高频筛' }
    ]
  },
  {
    id: 'washing',
    name: '洗选设备',
    icon: 'icon-washing',
    subcategories: [
      { id: 'spiral-classifier', name: '螺旋分级机' },
      { id: 'flotation-machine', name: '浮选机' },
      { id: 'magnetic-separator', name: '磁选机' },
      { id: 'concentrator', name: '浓缩机' }
    ]
  },
  {
    id: 'conveying',
    name: '输送设备',
    icon: 'icon-conveyor',
    subcategories: [
      { id: 'belt-conveyor', name: '皮带输送机' },
      { id: 'screw-conveyor', name: '螺旋输送机' },
      { id: 'bucket-elevator', name: '斗式提升机' },
      { id: 'vibrating-feeder', name: '振动给料机' }
    ]
  },
  {
    id: 'processing',
    name: '加工设备',
    icon: 'icon-processing',
    subcategories: [
      { id: 'rotary-kiln', name: '回转窑' },
      { id: 'dryer', name: '烘干机' },
      { id: 'granulator', name: '制粒机' },
      { id: 'roaster', name: '焙烧炉' }
    ]
  }
]

// 产品数据
const products = [
  // 破碎机设备
  {
    id: 1,
    name: 'PE系列颚式破碎机',
    imageUrl: '@/assets/images/bulding-bg.jpg',
    shortDesc: '高效粗碎设备，适用于各种矿石和岩石的破碎',
    mainCategory: 'crushing',
    subCategory: 'jaw-crusher',
    tags: ['粗碎', '高效', '耐用']
  },
  {
    id: 2,
    name: 'HPC圆锥破碎机',
    imageUrl: '@/assets/images/bulding-bg.jpg',
    shortDesc: '中细碎设备，具有破碎比大、产品粒度均匀等特点',
    mainCategory: 'crushing',
    subCategory: 'cone-crusher',
    tags: ['中细碎', '高效', '节能']
  },
  {
    id: 3,
    name: 'PF反击式破碎机',
    imageUrl: '@/assets/images/bulding-bg.jpg',
    shortDesc: '用于中硬物料的破碎，产品粒形好',
    mainCategory: 'crushing',
    subCategory: 'impact-crusher',
    tags: ['中碎', '粒形好', '多功能']
  },
  
  // 碾金机设备
  {
    id: 4,
    name: 'MQG球磨机',
    imageUrl: '@/assets/images/bulding-bg.jpg',
    shortDesc: '高效粉磨设备，广泛应用于选矿、建材等行业',
    mainCategory: 'grinding',
    subCategory: 'ball-mill',
    tags: ['粉磨', '高效', '节能']
  },
  {
    id: 5,
    name: 'MB棒磨机',
    imageUrl: '@/assets/images/bulding-bg.jpg',
    shortDesc: '用于矿石的细碎和研磨，产品粒度均匀',
    mainCategory: 'grinding',
    subCategory: 'rod-mill',
    tags: ['细碎', '均匀', '耐磨']
  },
  
  // 筛分设备
  {
    id: 6,
    name: 'YA圆振动筛',
    imageUrl: '@/assets/images/bulding-bg.jpg',
    shortDesc: '高效筛分设备，适用于各种物料的分级',
    mainCategory: 'screening',
    subCategory: 'circular-screen',
    tags: ['筛分', '高效', '稳定']
  },
  {
    id: 7,
    name: 'ZS直线振动筛',
    imageUrl: '@/assets/images/bulding-bg.jpg',
    shortDesc: '精细筛分设备，分离效率高',
    mainCategory: 'screening',
    subCategory: 'linear-screen',
    tags: ['精细筛分', '高效', '精确']
  },
  
  // 洗选设备
  {
    id: 8,
    name: 'SF浮选机',
    imageUrl: '@/assets/images/bulding-bg.jpg',
    shortDesc: '用于矿物的浮选分离，分选效果好',
    mainCategory: 'washing',
    subCategory: 'flotation-machine',
    tags: ['浮选', '高效', '节能']
  },
  {
    id: 9,
    name: 'CTB磁选机',
    imageUrl: '@/assets/images/bulding-bg.jpg',
    shortDesc: '用于磁性矿物的分选，磁场强度高',
    mainCategory: 'washing',
    subCategory: 'magnetic-separator',
    tags: ['磁选', '高效', '耐用']
  },
  
  // 输送设备
  {
    id: 10,
    name: 'DTII皮带输送机',
    imageUrl: '@/assets/images/bulding-bg.jpg',
    shortDesc: '连续输送设备，输送量大，运行稳定',
    mainCategory: 'conveying',
    subCategory: 'belt-conveyor',
    tags: ['输送', '高效', '稳定']
  },
  {
    id: 11,
    name: 'LS螺旋输送机',
    imageUrl: '@/assets/images/bulding-bg.jpg',
    shortDesc: '用于粉状、颗粒状物料的输送',
    mainCategory: 'conveying',
    subCategory: 'screw-conveyor',
    tags: ['输送', '密封', '高效']
  },
  
  // 加工设备
  {
    id: 12,
    name: 'Φ3×48m回转窑',
    imageUrl: '@/assets/images/bulding-bg.jpg',
    shortDesc: '用于物料的煅烧，广泛应用于水泥、冶金等行业',
    mainCategory: 'processing',
    subCategory: 'rotary-kiln',
    tags: ['煅烧', '高效', '节能']
  },
  {
    id: 13,
    name: 'Φ3.2×13m烘干机',
    imageUrl: '@/assets/images/bulding-bg.jpg',
    shortDesc: '用于物料的干燥处理，烘干效果好',
    mainCategory: 'processing',
    subCategory: 'dryer',
    tags: ['烘干', '高效', '节能']
  }
]

// 计算属性：当前选中的主类目对应的子类目
const currentSubCategories = computed(() => {
  if (currentMainCategory.value === 'all') {
    // 如果选择全部主类目，合并所有子类目
    const allSubcategories = []
    mainCategories.forEach(category => {
      allSubcategories.push(...category.subcategories)
    })
    return allSubcategories
  } else {
    // 找到当前主类目对应的子类目
    const currentCategory = mainCategories.find(cat => cat.id === currentMainCategory.value)
    return currentCategory ? currentCategory.subcategories : []
  }
})

// 计算属性：筛选后的产品列表
const filteredProducts = computed(() => {
  return products.filter(product => {
    // 主类目筛选
    const mainCategoryMatch = currentMainCategory.value === 'all' || product.mainCategory === currentMainCategory.value
    // 子类目筛选
    const subCategoryMatch = currentSubCategory.value === 'all' || product.subCategory === currentSubCategory.value
    
    return mainCategoryMatch && subCategoryMatch
  })
})

// 方法：按主类目筛选
const filterByMainCategory = (categoryId) => {
  currentMainCategory.value = categoryId
  currentSubCategory.value = 'all' // 重置子类目筛选
  
  // 滚动到产品列表顶部
  document.querySelector('.products-grid').scrollIntoView({ behavior: 'smooth' })
}

// 方法：按子类目筛选
const filterBySubCategory = (categoryId) => {
  currentSubCategory.value = categoryId
  
  // 滚动到产品列表顶部
  document.querySelector('.products-grid').scrollIntoView({ behavior: 'smooth' })
}

// 方法：重置筛选条件
const resetFilters = () => {
  currentMainCategory.value = 'all'
  currentSubCategory.value = 'all'
}

// 方法：跳转到产品详情页
const goToProductDetail = (productId) => {
  // 实际项目中应该使用路由跳转
  console.log(`跳转到产品详情页: ${productId}`)
  // this.$router.push(`/products/${productId}`)
  
  // 这里使用alert模拟跳转
  alert(`查看产品ID为 ${productId} 的详情`)
}

// 处理滚动事件 - 主类目导航栏吸附效果
const handleScroll = () => {
  if (mainCategoryNav.value) {
    const navTop = mainCategoryNav.value.offsetTop
    if (window.scrollY > navTop) {
      mainCategoryNav.value.classList.add('sticky')
    } else {
      mainCategoryNav.value.classList.remove('sticky')
    }
  }
}

onMounted(() => {
  // 初始化AOS
  AOS.init({
    duration: 1000,
    once: true
  })
  
  // 添加滚动监听
  window.addEventListener('scroll', handleScroll)
  
  // 初始检查滚动位置
  handleScroll()
})

onUnmounted(() => {
  // 移除滚动监听
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped lang="scss">
.products-page {
  // 页面标题区
  .page-banner {
    background: linear-gradient(135deg, #0A2463 0%, #3E92CC 100%);
    padding: 80px 0;
    text-align: center;
    color: white;
    
    .banner-content {
      .page-title {
        font-size: 2.5rem;
        margin-bottom: 15px;
        font-weight: 700;
      }
      
      .page-breadcrumb {
        .el-breadcrumb {
          .el-breadcrumb__item {
            .el-breadcrumb__inner {
              color: rgba(255, 255, 255, 0.8);
              
              &.is-link {
                &:hover {
                  color: #ffffff;
                }
              }
            }
            
            .el-breadcrumb__separator {
              color: rgba(255, 255, 255, 0.5);
              margin: 0 8px;
            }
          }
        }
      }
    }
    
    @media (max-width: 768px) {
      padding: 60px 0;
      
      .banner-content {
        .page-title {
          font-size: 2rem;
        }
      }
    }
  }
  
  // 主内容区
  .main-content {
    // 主类目导航栏
    .main-category-nav {
      background-color: #ffffff;
      border-bottom: 1px solid #eee;
      padding: 15px 0;
      transition: all 0.3s ease;
      
      &.sticky {
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        z-index: 998;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      }
      
      .category-buttons {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        
        .category-btn {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 10px 20px;
          background: none;
          border: 1px solid #e0e0e0;
          border-radius: 25px;
          cursor: pointer;
          transition: all 0.3s ease;
          font-size: 1rem;
          
          .iconfont {
            font-size: 18px;
            color: #666;
          }
          
          &:hover {
            border-color: #D8315B;
            color: #D8315B;
            
            .iconfont {
              color: #D8315B;
            }
          }
          
          &.active {
            background-color: #D8315B;
            border-color: #D8315B;
            color: #ffffff;
            
            .iconfont {
              color: #ffffff;
            }
          }
        }
      }
    }
    
    // 子类产品筛选区
    .subcategory-filter {
      background-color: #f9f9f9;
      padding: 20px 0;
      
      .filter-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        
        .filter-btn {
          padding: 8px 20px;
          background-color: #ffffff;
          border: 1px solid #e0e0e0;
          border-radius: 20px;
          cursor: pointer;
          transition: all 0.3s ease;
          font-size: 0.95rem;
          
          &:hover {
            border-color: #D8315B;
            color: #D8315B;
          }
          
          &.active {
            background-color: #D8315B;
            border-color: #D8315B;
            color: #ffffff;
          }
          
          &.all-btn {
            background-color: #f0f0f0;
            font-weight: 500;
          }
        }
      }
    }
    
    // 产品卡片展示区
    .products-grid {
      padding: 50px 0;
      
      .products-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        
        @media (max-width: 1200px) {
          grid-template-columns: repeat(2, 1fr);
        }
        
        @media (max-width: 768px) {
          grid-template-columns: 1fr;
        }
        
        .product-card {
          background-color: #f9f9f9;
          border-radius: 8px;
          overflow: hidden;
          transition: all 0.3s ease;
          cursor: pointer;
          
          &:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
          }
          
          .product-image {
            position: relative;
            height: 220px;
            overflow: hidden;
            
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: transform 0.5s ease;
            }
            
            .product-overlay {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background-color: rgba(0, 0, 0, 0.5);
              display: flex;
              align-items: center;
              justify-content: center;
              opacity: 0;
              transition: opacity 0.3s ease;
              
              .view-detail-btn {
                padding: 10px 20px;
                background-color: #D8315B;
                color: #ffffff;
                border: none;
                border-radius: 20px;
                cursor: pointer;
                display: flex;
                align-items: center;
                gap: 5px;
                transition: all 0.3s ease;
                
                &:hover {
                  background-color: #b92a4c;
                  transform: scale(1.05);
                }
              }
            }
            
            &:hover {
              img {
                transform: scale(1.05);
              }
              
              .product-overlay {
                opacity: 1;
              }
            }
          }
          
          .product-info {
            padding: 20px;
            
            .product-name {
              font-size: 1.1rem;
              margin-bottom: 8px;
              color: #333;
            }
            
            .product-desc {
              color: #666;
              font-size: 0.9rem;
              margin-bottom: 10px;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
            
            .product-tags {
              display: flex;
              gap: 5px;
              
              .el-tag {
                background-color: rgba(10, 36, 99, 0.1);
                color: #0A2463;
                border-color: transparent;
              }
            }
          }
        }
      }
      
      // 空状态
      .empty-state {
        text-align: center;
        padding: 80px 0;
        
        .empty-icon {
          font-size: 60px;
          color: #e0e0e0;
          margin-bottom: 20px;
        }
        
        .empty-text {
          font-size: 1.1rem;
          color: #999;
          margin-bottom: 30px;
        }
      }
    }
  }
}
</style>